<template>
  <div class="webrtc">
    <el-scrollbar class="wertc-scrollbar" wrap-class="wertc-scrollbar__wrap">
      <el-form
        :model="form"
        size="small"
        label-width="100px"
        :hide-required-asterisk="true"
        :rules="rules"
        ref="form"
      >
        <el-form-item
          label="账号："
          prop="userName"
          :rules="[
                            { required: true, message: '用户名不能为空', trigger: 'blur'},
                          ]"
        >
          <el-input style="width:40%" v-model="form.userName" />
        </el-form-item>
        <el-form-item
          label="密码："
          prop="password"
          :rules="[
                            { required: true, message: '密码不能为空', trigger: 'blur'},
                          ]"
        >
          <el-input style="width:40%" type="password" v-model="form.password" show-password />
        </el-form-item>
      </el-form>
    </el-scrollbar>
  </div>
</template>

<script>
import { getUserInfo, saveUser } from '@/api/warning'
export default {
  props: {},
  data() {
    return {
      form: {
        userName: '',
        password: '',
      },
    }
  },
  methods: {
    //账户配置
    handleUserConfig() {
      getUserInfo().then((res) => {
        this.form = res.data
      })
    },
    // 保存
    handleSubmit() {
      saveUser(this.form).then((res) => {
        this.$notify({
          title: '成功',
          message: '修改成功',
          type: 'success',
          duration: 2000,
        })
      })
    },
  },
  mounted() {
    this.handleUserConfig()
  },
}
</script>

<style lang="scss" scoped>
.webrtc {
  height: 100%;
  .wertc-scrollbar {
    height: 100%;
  }
  /deep/.wertc-scrollbar__wrap {
    width: auto;
    overflow-x: hidden;
    margin-right: -20px !important;
  }
  .el-form {
    .el-form-item {
      /deep/.el-form-item__label {
        color: #fff;
      }
      /deep/.el-input__inner {
        width: 100%;
        background-color: #1a4969;
        color: #fff;
      }
      /deep/.el-switch__label {
        color: #fff;
        &.is-active {
          color: #13ce66;
        }
      }
    }
  }
}
</style>